﻿<widget(styles-view) .element-details .panel>
  <section.collapsible.used-styles expanded>
    <header .treed>Used styles</header>
    <text .no-items>no styles</text>
    <dl></dl>
  </section>
  <section.collapsible.styles>
    <header .treed>Styles</header>
    <text .no-items>no rules applied</text> 
    <dl></dl>
  </section>
  <section.collapsible.states>
    <header .treed>States</header>
    <text .no-items>no states</text>         
    <dl></dl>
  </section>
  <section.collapsible.attributes>
    <header .treed>Attributes</header>
    <text .no-items>no attributes</text> 
    <dl></dl>
  </section>
 <section.collapsible.metrics expanded>
    <header .treed>Metrics</header>
    <div.box.margin>    
      <output(mt) value="-" />
      <output(ml) value="-" />
      <output(mr) value="-" />
      <output(mb) value="-" />
      <div.box.border>    
        <output(bt) value="-" />
        <output(bl) value="-" />
        <output(br) value="-" />
        <output(bb) value="-" />
        <div.box.padding>
           <output(pt) value="-" />
           <output(pl) value="-" />
           <output(pr) value="-" />
           <output(pb) value="-" />
           <div.inner><output(w) value="-" />x<output(h) value="-" /></div> 
        </div>     
      </div>     
    </div>
    <dl.intrinsics>
      <dt>width min</dt><dd><output(minx) /></dd>
      <dt>max</dt><dd><output(maxx) /></dd>
      <dt>height min</dt><dd><output(miny) /></dd>
      <dt>max</dt><dd><output(maxy) /></dd>
    </dl>
  </section>
</widget>